// let myname = document.cookie;
// // console.log(myname);
// let newname = myname.split("=")[0];
// // console.log(newname);
// let nameObj = document.getElementById("newname");
// // console.log(nameObj);
// nameObj.innerHTML = newname;
/* 




*/
let banner = document.querySelector(".banner")
let arrObj = document.querySelector("#arr")
let olObj = document.querySelector(".ol1")
let lisObj = document.querySelectorAll(".banner_biglist>li")
let ulObj = document.querySelector(".banner_biglist")
let leftObj = arrObj.firstElementChild;
let rightObj = arrObj.lastElementChild;
// console.log(ulObj);

var imgW = lisObj[0].offsetWidth
    // console.log(imgW);

//1.鼠标移入+移出
banner.onmouseover = function() {
    arrObj.style.display = 'block'
    clearInterval(timess)
};
banner.onmouseout = function() {
    arrObj.style.display = 'none'
    autoPlay();
};

//2.动态生成下标
// console.log(lisObj.length);
for (var i = 0; i < lisObj.length; i++) {
    let liOl = document.createElement("li")
    i === 0 && (liOl.className = "current")
    olObj.appendChild(liOl)
}
lisOl = olObj.querySelectorAll('li'); //ol的li标签所有的节点，可以用foreach，是维数组可以使用下标
// console.log(lisOl);

//3.复制第一张图片,并且添加
var firstImgClone = lisObj[0].cloneNode(true);
ulObj.appendChild(firstImgClone)

//4.鼠标点击，让整个ul的位置往左移动
var imgIndex = 0;
var target = ''
rightObj.onclick = function() {
    imgIndex++;

    let explain = false; //判断是否调用回调函数
    if (imgIndex == lisObj.length) {
        // console.log(imgIndex);
        target = -imgW * imgIndex
        imgIndex = 0;
        explain = true;
    } else {
        // console.log(target);
        target = -imgW * imgIndex
    };
    move(ulObj, {
        left: target
    }, function() {
        explain && (ulObj.style.left = 0)
    })
    sel()
};
leftObj.onclick = function() {
        imgIndex--;
        let target = ''
        if (imgIndex < 0) {
            // console.log(111);
            ulObj.style.left = -imgW * lisOl.length + 'px';
            target = -imgW * (lisOl.length - 1);
            imgIndex = lisOl.length - 1;

        } else {
            target = -imgW * imgIndex;
        }
        move(ulObj, {
            left: target
        }, function() {})
        sel()

    }
    //实现下标跟随
function sel() {
    let current = document.querySelector('.current')
    current.classList.remove('current');
    lisOl[imgIndex].className = 'current';
    // console.log(lisOl[imgIndex]);
}

let timess = '';
// 自动播放
function autoPlay() {
    // console.log(111);
    timess = setInterval(() => {
        rightObj.onclick()
    }, 2000)
}
autoPlay();
/**** 使用序列号切换 *****/
// 使用事件冒泡，直接给父元素设置点击事件
// 使用冒泡事件给最大的ol设置点击，如果点击的是标签名是LI,那么就会获得该标签的当前的文本数字再减去1，拿着这个数字来设置目标距离
olObj.onclick = function(eve) {
    var clickObj = eve.target //当前点击的对象
    if (clickObj.nodeName === 'LI') {
        imgIndex = clickObj[i] - 1;
        // imgIndex = clickObj.innerHTML - 1
        let abb = 0;
        Array.from(lisOl).some((val, key) => {
            console.log(val, key);
            // console.log(clickObj);
            abb = key
            return clickObj === val
        });
        // console.log(abb);
        imgIndex = abb + 1
    };
    target = -imgW * imgIndex
        //          1000*0
        //          1000*1

    move(ulObj, {
        left: target
    }, function() {})
}

var times = '';

function move(ele, taObj, cb) {
    // 开始前先清除定时器，防止累加
    clearInterval(times);
    times = setInterval(function() {
        for (var attr in taObj) {
            // 设置定时器的开关
            var onOff = false;
            // 遍历运动的属性
            // console.log(attr);

            // 获取元素的实时的运动属性值 相当于 offsetLeft
            // 获取的样式是带有 px 单位的，用parseTnt转化为数字，去除 px
            let tmpPos = parseInt(getPos(ele, attr));
            // console.log(tmpPos);

            // 计算 speed
            let speed = (taObj[attr] - tmpPos) / 10;

            // 假如speed 是 8.4 ，就需要向上取整，如果向下取整就会出现后退的现象， 负数的话就是向下取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            // 将运动属性进行更新
            ele.style[attr] = tmpPos + speed + 'px';

            // 判断是否达到目标值
            if ((tmpPos + speed) == taObj[attr]) {
                onOff = true;
            };
        }

        // 判断开关
        if (onOff) {
            clearInterval(times);
            // cb && cb()
            // 两种写法都可以，存在就调用
            if (cb()) {
                cb()
            }
        }
    }, 30)
}
// 获取行内外的 css 样式
function getPos(obj, attr) {
    if (obj.currentStyle) { // 获取css的样式
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj)[attr]
    }
}




//从localStorage获取数据
// let poid = localStorage.getItem("userMsg");
// console.log(poid);
// console.log(userMsg);
//如果存在就
var userMsg = localStorage.getItem("userMsg") ? JSON.parse(localStorage.getItem("userMsg")) : {};

// console.log(userMsg.msg);
// let ed = userMsg.msg
// console.log((userMsg.msg).isLogin);

if (localStorage.getItem("userMsg")) {
    if ((userMsg.msg).isLogin === "ok") {
        $("#hide").hide()
        $("#same").show()
        $("#newname").html((userMsg.msg).username)
    } else {
        $("#hide").show()
        $("#same").hide()
        $("#dc").hide()
    }


}
$("#dc").click(function() {

    localStorage.removeItem("userMsg");
    location.reload()
    $("#dc").hide()
})